<template>
  <div class="height-full back-white" style="padding: 14px 12px">
    <div class="tabs relative ml10">
      <Tabs v-model="tabActiveValue" class="custom-tabs" @on-click="handleTabClick">
        <TabPane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.value"></TabPane>
      </Tabs>
    </div>

    <div class="list-filter">
      <Form class="custom-ivu-form" inline :label-width="80" @submit.native.prevent="handleFormSubmit">
        <!-- <FormItem label="所属主题">
          <Select v-model="formData.type" class="form-item--width" clearable @on-change="handleFormSubmit">
            <Option v-for="(nt, i) of []" :key="i" :value="nt.key">{{ nt.value }}</Option>
          </Select>
        </FormItem> -->

        <FormItem label="时间范围" class="width-auto">
          <TimeRange
            v-model="formData.timeType"
            @on-time-type-change="handleTimeTypeChange"
            @on-date-range-change="handleTimeRange"
          />
        </FormItem>

        <FormItem>
          <template #label>
            <KeywordsSelect
              v-if="tabActiveValue === 'spreadEffect'"
              :keyword.sync="keyword"
              :keywords="keywords"
            ></KeywordsSelect>

            <span v-else>{{ keyword.value }}</span>
          </template>
          <Input
            v-model="formData[keyword.key]"
            :label-width="60"
            class="form-item--width"
            placeholder="请输入"
            size="large"
            clearable
            @on-clear="handleFormSubmit"
          ></Input>
        </FormItem>

        <Button class="btn-search" type="primary" html-type="submit">查询</Button>
      </Form>

      <transition name="fade" mode="out-in">
        <component :is="tabActiveItem.component" :form-data="formData"></component>
      </transition>
    </div>
  </div>
</template>

<script>
// components
import KeywordsSelect from '@/components/common/KeywordsSelect/KeywordsSelect'
import SpreadEffectList from './Components/SpreadEffectList.vue'
import ProvideUnitList from './Components/ProvideUnitList.vue'
import SpreadUnitList from './Components/SpreadUnitList.vue'
import TimeRange from '@/components/customFrom/TimeRange'

// util
import $bus from '@/utils/bus.js'

//
import { createForm } from './service'
export default {
  name: 'ManuRankList',

  components: { KeywordsSelect, ProvideUnitList, SpreadEffectList, SpreadUnitList, TimeRange },

  data() {
    return {
      tabs: [
        { label: '传播效果排行榜', value: 'spreadEffect', component: 'spread-effect-list' },
        { label: '供稿单位排行榜', value: 'provideUnit', component: 'provide-unit-list' },
        { label: '传播单位排行榜', value: 'spreadUnit', component: 'spread-unit-list' },
      ],
      tabActiveValue: '',

      formData: createForm(),
      keyword: {},
      keywords: [
        { key: 'title', value: '标题' },
        { key: 'source', value: '单位' },
      ],
    }
  },

  computed: {
    tabActiveItem() {
      return this.tabs.find((t) => t.value === this.tabActiveValue) || {}
    },
  },

  watch: {
    'keyword.key'(v) {
      if (v === 'title') {
        this.formData.source = ''
      } else {
        this.formData.title = ''
      }
    },

    tabActiveValue: {
      handler(v) {
        // 只有传播效果排行榜有标题
        const i = v !== 'spreadEffect' ? 1 : 0
        this.keyword = this.keywords.at(i)
      },
    },
  },

  methods: {
    handleTabClick(name) {
      this.$router.push({ name: 'manuRankList', query: { t: name } })
    },

    handleTimeRange(date) {
      this.formData.startTime = date[0]
      this.formData.endTime = date[1]
      this.handleFormSubmit()
    },

    handleTimeTypeChange(v) {
      // console.log(v)
      if (v === '自定义') {
      } else {
        this.formData.startTime = ''
        this.formData.endTime = ''
        this.handleFormSubmit()
      }
    },

    handleFormSubmit() {
      $bus.$emit('on-manu-rank-list', { ...this.formData })
    },
  },

  mounted() {
    this.tabActiveValue = this.$route.query.t || this.tabs[0].value
  },
}
</script>

<style lang="less" scoped>
.list-filter {
  padding-left: 0;

  /* .custom-ivu-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .ivu-form-item {
      margin-right: 0;
      margin-bottom: 18px;
      . {
        max-width: 250px;
      }
    }
  } */
}
</style>
